<template>
  <div>
    <div class="hot-header">周末去哪儿</div>
    <ul>
      <li class="item border-bottom"
          v-for="item of list"
          :key="item.id">
        <div class="img-wrapper">
          <img class="img"
               :src="item.imgUrl"
               alt="">
        </div>
        <div class="info">
          <div class="title">{{item.title}}</div>
          <div class="desc">{{item.desc}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.hot-header
  height: 0.8rem
  line-height: 0.8rem
  text-indent: 0.2rem
  background: #ccc
.item
  .img-wrapper
    height: 0
    padding-bottom: 33.9%
    overflow: hidden
    .img
      width: 100%
  .info
    padding: 0.1rem
    .title
      line-height: 0.54rem
      font-size: 0.32rem
      ellipsis()
    .desc
      line-height: 0.4rem
      color: #ccc
      ellipsis()
</style>
